;
(function () {
  new Vue({
    el: '#rentalIncome',
    data: {
      permissions: JSON.parse(window.localStorage.getItem('permissions')),
      listMenu: [{
        name: '增长率',
        code: 'zz'
      }, {
        name: '变化率',
        code: 'bh'
      }, {
        name: '完成率',
        code: 'wc'
      }],
      active: ['zz'],
      projectList: [],
      projectId_Y: [],
      projectId_M: [],
      year: [],
      selectedYear: [],
      url_year: '',
      url_month: '',

      isShowY: true,
      isShowM: true,
      
    },
    computed: {
      textY() {
        if (this.active + '' == 'zz') {
          return '年度实收同比增长率分析'
        }
        if (this.active + '' == 'bh') {
          return '年度平均租金变化分析'
        }
        if (this.active + '' == 'wc') {
          return '年度租金收缴率分析'
        }
      },
      textM() {
        if (this.active + '' == 'zz') {
          return '月度实收环比增长率分析'
        }
        if (this.active + '' == 'bh') {
          return '月度平均租金变化分析'
        }
        if (this.active + '' == 'wc') {
          return '年度预算租金完成率分析'
        }
      },
      chartTitle_Y() {
        if (this.active + '' == 'zz') {
          return '金额（万元）'
        }
        if (this.active + '' == 'bh') {
          return '金额（元/m²/天）'
        }
        if (this.active + '' == 'wc') {
          return '收缴率（%）'
        }
      },
      chartTitle_M() {
        if (this.active + '' == 'zz') {
          return '金额（万元）'
        }
        if (this.active + '' == 'bh') {
          return '金额（元/m²/天）'
        }
        if (this.active + '' == 'wc') {
          return '完成率（%）'
        }
      }
    },
    methods: {
      // 获取业态
      getFormats() {
        hlhttp.get({
          url: 'configure/dict',
          data: {
            'module_code': 'HETN',
            'config_name': 'HT_ESTATE_TYPE'
          },
          success: res => {
            this.formats = res
          }
        })
      },

      // 获取项目数据
      getProjectData() {
        hlhttp.get({
          url: 'user/projects',
          success: (data) => {
            data.unshift({
              projectName: '全部',
              projectId: '#'
            })
            this.projectList = hlArrayUtil.replaceData(data, [{
              key: 'projectName',
              rKey: 'name'
            }, {
              key: 'projectId',
              rKey: 'code'
            }]);
            this.projectId_Y = ['#']
            this.projectId_M = ['#']
            this.getChartUrl()
          }
        })
      },
      // 获取图标url
      getChartUrl() {
        let val = this.active + ''
        this.projectId_Y = ['#']
        this.projectId_M = ['#']
        if (val == 'zz') {
          this.url_year = 'report/year_rent_growth_rate'
          this.url_month = 'report/month_rent_growth_rate'
        }
        if (val == 'bh') {
          this.url_year = 'report/year_rent_change_rate'
          this.url_month = 'report/month_rent_change_rate'
        }
        if (val == 'wc') {
          this.url_year = 'report/year_rent_collection_rate'
          this.url_month = 'report/year_rent_completion_rate'
        }
        this.getChartData('Y', this.url_year)
        this.getChartData('M', this.url_month)
      },
      // 获取图标data
      getChartData(type) {
        let data = {
          project_id: type == 'Y' ? this.projectId_Y + '' : this.projectId_M + ''
        }

        if (this.active == 'wc' && type == 'M') {
          data = {
            year: this.selectedYear + ''
          }
        }

        hlhttp.get({
          url: type == 'Y' ? this.url_year : this.url_month,
          data: data,
          success: res => {

            res.reverse()
            if (!res || !res.length) {
              type == 'Y' ? this.isShowY = false : this.isShowM = false
              return
            }
            let arr = res.filter(item => {
              return item.completionRate == '0' || item.rentAmount == '0'
            })

            if (arr.length == res.length) {
              type == 'Y' ? this.isShowY = false : this.isShowM = false
              return
            }

            type == 'Y' ? this.isShowY = true : this.isShowM = true

            res.map(item => {

              item.xText = item.year || item.month || item.projectName
            })
            this.getHighcharts(type, res)
          }
        })
      },
      // 获取图标形状
      getHighcharts(type, data) {
        let xData = []
        let yData = []

        data.map(item => {
          xData.push(item.xText)
          if (this.active + '' == 'zz') {
            yData.push(item.rentAmount)
          }
          if (this.active + '' == 'bh') {
            yData.push(item.growthRate)
          }
          if (this.active + '' == 'wc') {
            yData.push(item.completionRate * 100)
          }

        })

        var myChart = type == 'Y' ? echarts.init(document.getElementById('chart01')) : echarts.init(document.getElementById('chart02'));

        var option = {
          title: [{
            text: type == 'Y' ? this.chartTitle_Y : this.chartTitle_M,
            left: 50,
            top: 0,
            itemGap: 10,
            textStyle: {
              fontSize: 12,
              fontWeight: 400,
              color: '#666'
            },
          }],
          tooltip: {
            trigger: 'axis',
          },

          color: ['#A6D8F3'],
          xAxis: {
            type: 'category',
            data: xData,
          },
          yAxis: {
            type: 'value',
          },
          series: [{
            data: yData,
            name: this.active == 'zz' ? '实收金额' : (this.active == 'bh' ? '金额' : (type == 'Y' ? '收缴率' : '完成率')),
            type: 'bar',
          }]
        };
        if (this.active + '' == 'zz') {
          let arr = []
          data.map(item => {
            arr.push(Number(item.growthRate * 100).toFixed(2))
          })
          option.series.unshift({
            data: arr,
            name: this.active == 'zz' ? '增长率' : '',
            type: 'line',
            color: '#f4ae47'
          })
          let that = this
          option.tooltip.formatter = function (params) {
            let tip = "";
            if (params != null && params.length > 0) {
              for (let i = 0; i < params.length; i++) {
                tip += params[i].seriesName + "：" + (params[i].value ? Number(params[i].value).toFixed(2) : '0.00') + (params[i].seriesName == '增长率' ? '%' : '万元') + "</br>"
              }
            }
            return tip;
          }
        } else {
          let that = this
          option.tooltip.formatter = function (params) {
            let tip = "";
            if (params != null && params.length > 0) {
              for (let i = 0; i < params.length; i++) {
                tip += params[i].seriesName + "：" + (params[i].value ? Number(params[i].value).toFixed(2) : '0.00') + (that.active + '' == 'bh' ? '元/m²/天' : '%') + "</br>"
              }
            }
            return tip;
          }
          if (that.active + '' == 'wc' && type == 'M') {
            option.dataZoom = [{
                type: "slider",
                realtime: true,
                start: 0,
                end: 100,
                xAxisIndex: [0],
              }],
              option.xAxis.axisLabel = {
                interval: 0,
                rotate: 40
              }
          }
        }
        myChart.setOption(option, true)
      }
    },
    mounted() {
      for (let i = 2015; 2045 > i; i++) {
        this.year.push({
          name: i,
          code: i
        })
      }
      let date = new Date()
      this.selectedYear = [date.getFullYear()]

      this.getProjectData()
    }
  })
}())